<template>
  <div class="search-page">
    <van-dropdown-menu>
      <van-dropdown-item 
        disabled
        title="综合" />
      <van-dropdown-item 
        :options="priseOption"
        v-model="priseValue"
        @change="reSearch"
        title="价格" />
        <van-dropdown-item 
        :options="categoryOption"
        v-model="categoryValue"
        @change="reSearch"
        title="分类" />
    </van-dropdown-menu>

    <list-container :is_title="false">
      <goods-card :goodsTitle="goods.name" :goodsPrice="goods.retail_price"
      v-for="goods in goodsList" :key="goods.id">
      <img :src="goods.list_pic_url">
      </goods-card>
    </list-container>
    
  </div>
</template>

<script>
  import ListContainer from '@/components/ListContainer';
  import GoodsCard from '@/components/GoodsCard';
  export default {
    components: {
      GoodsCard,
      ListContainer
    },
    props:['searchRes','keyword'],
    data() {
      return {
        goodsList:[],
        filterCategory:[],
        categoryOption: [],
        priseOption:[
          {
            text:"从高到低",
            value:"desc"
          },
          {
            text:"从低到高",
            value:"asc"
          }
        ],
        priseValue:"desc",
        categoryValue:""
      };
    },
    watch:{
       searchRes: {
         
        handler: function(){
          this.filterCategory = this.searchRes.filterCategory;
          this.goodsList = this.searchRes.goodsList

          // 数据格式化
          let resolvList = new Array;
          for (let category of this.filterCategory){
            let resolvObj = new Object();
            resolvObj.text = category.name;
            resolvObj.value = category.id
            resolvList.push(resolvObj);
            // 选中菜单
            if(category.checked){
              this.categoryValue = category.id
              console.log(this.categoryValue);
            }
          }
          this.categoryOption = resolvList
        },
        immediate:true
      }
    },
    methods: {
      reSearch(){
        // 按照配置从新搜索
        const config = {
          keyword:this.keyword,
          page:1,
          order:this.priseValue,
          categoryId:this.categoryValue,
          sort:"price"
        }
        this.$emit("needSearch",config)
      }
    },
};
</script>

<style scoped>
  .search-page{
  }
</style>